import { Text, View } from '@tarojs/components'
import Layout from '../../components/layout'
import './index.less'

const Question = () => {
  return (
    <Layout title='问题' showBack={false}>
      <View className='question-container'>
        <View className='question-header'>
          <Text className='question-title'>常见问题</Text>
          <Text className='question-subtitle'>为您解答常见疑问</Text>
        </View>

        <View className='question-categories'>
          <View className='category-item'>
            <Text className='category-title'>服务相关</Text>
            <Text className='category-count'>12个问题</Text>
          </View>
          <View className='category-item'>
            <Text className='category-title'>订单相关</Text>
            <Text className='category-count'>8个问题</Text>
          </View>
          <View className='category-item'>
            <Text className='category-title'>支付相关</Text>
            <Text className='category-count'>6个问题</Text>
          </View>
        </View>

        <View className='question-list'>
          <Text className='list-title'>热门问题</Text>

          <View className='question-item'>
            <Text className='question-text'>如何预约服务？</Text>
            <Text className='question-arrow'>{'>'}</Text>
          </View>

          <View className='question-item'>
            <Text className='question-text'>服务费用如何计算？</Text>
            <Text className='question-arrow'>{'>'}</Text>
          </View>

          <View className='question-item'>
            <Text className='question-text'>可以取消订单吗？</Text>
            <Text className='question-arrow'>{'>'}</Text>
          </View>

          <View className='question-item'>
            <Text className='question-text'>如何联系客服？</Text>
            <Text className='question-arrow'>{'>'}</Text>
          </View>

          <View className='question-item'>
            <Text className='question-text'>服务质量有保障吗？</Text>
            <Text className='question-arrow'>{'>'}</Text>
          </View>
        </View>

        <View className='contact-section'>
          <Text className='contact-title'>还有其他问题？</Text>
          <View className='contact-button'>
            <Text className='contact-text'>联系客服</Text>
          </View>
        </View>
      </View>
    </Layout>
  )
}

export default Question
